<template>
  <view class="order-item">
    <view class="header" @click="navigateToDetails">
      <v-icon size="36rpx" src="@/static/icons/cart-merchant.svg" />
      <view class="merchant-name">
        <view class="name-text">
          {{ aftersales.merchant_name }}
        </view>
      </view>
      <view class="status">
        {{ orderStatus }}
      </view>
    </view>
    <template
      v-for="(product, index) in aftersales.back_refund_details"
      :key="product.sku_id"
    >
      <view v-if="index !== 0" class="divider" />
      <aftersales-product :product="product" @click="navigateToDetails" />
    </template>
    <view class="footer">
      <view
        class="aftersales-status"
        :class="{
          highlight: aftersalesStatus === '售后中'
        }"
      >
        {{ aftersalesStatus }}
      </view>
      <v-button
        :custom-style="{
          height: '78rpx',
          padding: '0 28rpx',
          minWidth: '168rpx'
        }"
        type="plain"
        @click="navigateToDetails"
      >
        售后详情
      </v-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import AftersalesProduct from './aftersales-product.vue';

const props = defineProps<{
  aftersales: BackRefundVO;
}>();

const aftersales = toRef(props, 'aftersales');
const orderStatus = computed(() => {
  switch (true) {
    case aftersales.value.order_shipping_statue === 'NONE':
      return '';
    case aftersales.value.order_shipping_statue === 'UNSHIPPED':
      return '待发货';
    case aftersales.value.order_shipping_statue === 'SHIPPED':
      return '待收货';
    case aftersales.value.order_shipping_statue === 'RECEIVED':
      return '已收货';
    case aftersales.value.order_shipping_statue === 'RETURNED':
      return '已退货';
    default:
      return '';
  }
});
const aftersalesStatus = computed(() => {
  switch (true) {
    case aftersales.value.basic_status === 'CANCEL':
      return '已撤销';
    case aftersales.value.basic_status === 'PROCEED_REFUND':
      return '售后中';
    case aftersales.value.basic_status === 'SUCCESS':
      return '售后成功';
    case aftersales.value.basic_status === 'CLOSE':
      return '售后关闭';
    default:
      return '';
  }
});

const navigateToDetails = () => {
  uni.navigateTo({
    url: `/pages/aftersales/aftersales-details?id=${aftersales.value.id}`
  });
};
</script>

<style lang="scss" scoped>
.order-item {
  padding: 28rpx 24rpx;
  margin: 0 24rpx 24rpx;
  background-color: white;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  .header {
    height: 40rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    .merchant-name {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      .name-text {
        font-size: 28rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
    .status {
      line-height: 36rpx;
    }
  }
  .divider {
    height: 1px;
    background-color: #eeeeee;
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30rpx;
    .aftersales-status {
      margin-right: auto;
      color: #999999;
      &.highlight {
        color: #ff2f3b;
      }
    }
  }
}
</style>
